<template>
  
    <div class="goodsEntry">
        <div style="padding: 20px;">
            <el-button type="primary" @click="returnOver">返回</el-button>
          
        </div>
        <el-form :inline="true" style="padding: 20px">
            <el-form-item label="扫码录入日期：">
                <el-date-picker
                <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                
                v-model="endtime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeTime">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="货位状态：">
                
            </el-form-item>
            <el-form-item label="关键字搜索：">
          <el-input style="width: 300px;" v-model="queryData.goodsName" placeholder="请输入商品ID,商品名称" size="medium"></el-input>
               
            </el-form-item>
            <el-form-item label="">
            <el-button type="primary" size="medium" @click="query">查询</el-button>
               
                
            </el-form-item>
            <el-form-item label="">
              <span> 仓库：{{tableData[0].store_name}}</span>
              <span> 货位区域：{{tableData[0].area_name}}</span>
              <span>总可存量：{{tableData[0].area_num}}瓶</span>
              <span> 现存量：{{tableData[0].used_num}}瓶</span>
              <span>余量：{{tableData[0].unused_num}}瓶</span>
            </el-form-item>
           
        </el-form>
      
         
          <!-- <el-date-picker type="date" placeholder="选择日期" size="medium" v-model="value1">
          </el-date-picker>
          -
          <el-date-picker type="date" placeholder="选择日期" size="medium" v-model="value1">
          </el-date-picker> -->
        
      
            <!-- <el-button type="primary" size="medium" @click="exportData">导出</el-button> -->
          <!-- <span>商品分类：</span>
          <el-select v-model="categoryvalue" size="medium" @change="changecatey">
            <el-option :value="item.value" :label="item.label" v-for="item in category" :key="item.index"></el-option>
           
          </el-select>
          <el-select v-model="queryData.goodsKindSecond" size="medium">
              <el-option :value="item.id" :label="item.name" v-for="item in goodsKindSecond" :key="item.index"></el-option>
            </el-select> -->
     
  
        <!-- <el-col :span="4" class="goods-category">
            仓库：
           <el-select v-model="storeId" size="medium" @change="handleChange">
            <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" class="goods-category">
         
           <el-select v-model="inputAreaId" size="medium">
            <el-option :value="item.id" :label="item.areaName" v-for="item in deptData" :key="item.index"></el-option>
          </el-select>
      
        </el-col> -->
        <!-- <el-col :span="5" class="goods-category">
            仓库：
            <el-cascader
            :options="deptData"
            v-model="selectedOptions"
            change-on-select
            @change="handleChange">
          </el-cascader>
        </el-col> -->
        <!-- <el-col :span="3" class="goods-count" >可出库订单：{{infovalue.orderNo}}个</el-col> 
        <el-col :span="3" class="goods-count" >可出库数量：{{infovalue.goodsPcs}}个</el-col>  -->
      
     
     
      <div class="wrapper">
        <el-table class="table" :data="tableData" stripe highlight-current-row border @selection-change="handleSelectionChange">
         <el-table-column
            type="index"
            width="50">
          </el-table-column>
         
          <el-table-column align="center" prop="create_time" label="扫描存放时间">
          </el-table-column>
          <el-table-column align="center" prop="area_name" label="存放位置">
          </el-table-column>
          <el-table-column align="center" prop="goods_id" label="商品ID">
            </el-table-column>
          <el-table-column align="center" prop="goods_name" label="商品名称">
          </el-table-column>
          <el-table-column align="center" prop="goods_no" label="sku编码">
          </el-table-column>
         
          <el-table-column align="center" prop="goodKindFirst" label="商品类别">
          </el-table-column>
          
          <el-table-column align="center" prop="rawDesc" label="原料">
          </el-table-column>
         
        </el-table>
        <el-pagination background 
        layout="total,prev, pager, next,jumper" 
        :page-size="page.pageSize" :total="page.total" :current-page="page.current"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <el-dialog title="商品种类" :visible.sync="goodsCates.show" class="goods-dialog">
        <el-table class="dialog-table" :data="goodsCates.tableData" stripe highlight-current-row border :height="height">
          <el-table-column align="center" prop="date" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="goods_id" label="商品ID">
          </el-table-column>
          <el-table-column align="center" prop="create_time" label="扫码录入时间">
          </el-table-column>
          <el-table-column align="center" prop="name" label="录入位置">
          </el-table-column>
          <el-table-column align="center" prop="goods_no" label="商品编码">
          </el-table-column>
          <el-table-column align="center" prop="goods_name" label="商品名称">
          </el-table-column>
          <el-table-column align="center" prop="sku_no" label="SKU编码">
            </el-table-column>
          <el-table-column align="center" prop="goods_kind_first" label="商品类别">
          </el-table-column>
          <el-table-column align="center" prop="netContent" label="香型">
          </el-table-column>
          <el-table-column align="center" prop="date" label="净含量">
          </el-table-column>
          <el-table-column align="center" prop="unit" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="alocohl" label="酒精度">
          </el-table-column>
          <el-table-column align="center" prop="raw_desc" label="原料">
          </el-table-column>
          <el-table-column align="center" prop="address" label="操作" width="150">
              <template slot-scope="scope">
                <span class="canceloff-btn" @click="canceloffOne(scope.row)">取消录入</span>
              </template>
            </el-table-column>
          </el-table>
        </el-table>
      </el-dialog>
      <audio id="myaudio" src="../../../viode/004.mp3" controls="controls" hidden="hidden" ></audio>
      <audio id="warn" src="../../../viode/warn.mp3" controls="controls"  hidden="hidden"></audio>
      <el-dialog title="选择酒窖" :visible.sync="dialogFormVisible">
        <el-form>
          
          <el-form-item label="选择酒窖" :label-width="formLabelWidth">
            <el-select v-model="cellarType" placeholder="请选择活动区域">
              <el-option label="合肥酒窖" value="0"></el-option>
              <el-option label="温州酒窖" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureData">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import exportExcel from '../../../axios/export.js'
    export default {
      data() {
        return {
          height: "auto",
          queryData: {
            startTime:'',
            endTime:'',
            goodsName:'',
            
          },
          areaId:this.$route.params.proId,
          infovalue:{},
          dialogFormVisible:false,
          goodsId:'',
          goodsKindSecond:[],
          categoryvalue:'',
          category:[],
          goodsCates: {
            show: false,
            tableData: [{}]
          },
          tableData: [{}],
          
          endtime:'',
          page: {
            pageSize: 10,
            current: 1,
            total: null
          },
          //联动
          options:[],
          selectedOptions:[],
          deptData:[],
          storeId:'',//仓库
          inputAreaId:'',//货位
          inType:'',//类型
          unusedNum:'',
          orderNo:'',
          cellarType:'',
          formLabelWidth:'120px'
        };
      },
      mounted () {
        this.categoryList();
        // console.log(this.$route.params.proId)
        this.tableList();
        this.outinfo();
        this.area();
      },
      methods: {
         //初始化数据
      async tableList() {
          try {
            let { data } = await this.$post({
              api: "/query/areainfo",
              data:{
                current:this.page.current,
                pageSize:this.page.pageSize,
                startTime:this.queryData.startTime,
                endTime:this.queryData.endTime,
                goodsName:this.queryData.goodsName,
                areaId:this.areaId
              }
            });
            if (data.code === 0) {
              console.log(data)
              this.tableData = data.data;
              this.page.total = data.rdPage.total;
              // this.page.total = data.rdPage.total;
              // console.log(data)
              // this.rawList = data.data;
            } else {
              // this.$message({
              //   type: "error",
              //   message: data.msg
              // });
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
      },
      //页面数据
      async outinfo() {
      try {
            let { data } = await this.$post({
              api: "/show/outinfo"
              
            });
            if (data.code === 0) {
              this.infovalue = data.data
              // console.log(data)
            
             
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
      },
        //商品分类接口
      async categoryList() {
      try {
        let { data } = await this.$post({
          api: "/show/leftmenu",
         
        });
        if (data.code === 0) {
         
          this.category.push({
            value:data.data[0].id,
            label:data.data[0].name
          })
          // this.goodsKindSecond = data.data[0].attrKeyList;
  
          
          // this.tableData = data.data;
          // this.page.total = data.rdPage.total;
          // console.log(data)
          // this.rawList = data.data;
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      } catch (e) {
        this.$message({
          type: "error",
          message: "接口报错"
        });
      }
   },
   async categoryid(id) {
      try {
            let { data } = await this.$post({
              api: "/show/propertyInfo",
              data:{
                id:id
              }
            });
            if (data.code === 0) {
              // console.log(data)
            
              this.goodsKindSecond = data.data.attrKeyList;
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
      },
      changecatey(id){
        this.categoryid(id)
        
      },
      //扫描入库
      async factoryGoods() {
          try {
            let { data } = await this.$post({
              api: "/scan/outGoods",
              data:{
                goodsId:this.goodsId,
                // storeId:this.storeId,
                // inputAreaId:this.inputAreaId,
                // inType:this.inType
              }
            });
            if (data.code === 0) {
              this.tableList();
              this.$message({
              type: "success",
              message: data.msg
             });
            
             this.autoplays();
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
              this.warnplay();
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
       },
        //音频录入
        autoplays(){
         let audio =  document.getElementById('myaudio')
         audio.currentTime = 0
         audio.play();
        // this.$netxTick(function(){
          // console.log(document.getElementById('myaudio'), 999)
           
        //  })
       },
       //
       warnplay(){
         let warn = document.getElementById('warn');
         warn.currentTime = 0
         warn.play();
       },
      //二维码录入
      smentry(){
        this.factoryGoods();
        this.goodsId = '';
      },
       //取消出库
      async storegoods() {
          try {
            let { data } = await this.$post({
              api: "/delete/outgoods",
              data:{
                orderNo:this.orderNo
               
              }
            });
            if (data.code === 0) {
              this.tableList();
              this.$message({
              type: "success",
              message: data.msg
             });
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
       },
       //确认出库
      async addstoregoods() {
          try {
            let { data } = await this.$post({
              api: "/sure/outgoods",
              data:{
                orderNo:this.orderNo,
                cellarType:this.cellarType
                // goodsIds:this.goodsIds
              }
            });
            if (data.code === 0) {
              this.tableList();
              this.$message({
              type: "success",
              message: data.msg
             });
             this.dialogFormVisible = false;
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
       },
       //仓库
       async area() {
          try {
            let { data } = await this.$post({
              api: "/show/store/area"
              
            });
            if (data.code === 0) {
              this.selectedOptions = data.data;
            console.log(data)
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
       },
       //根据仓库id货位
       async areainfo(id) {
          try {
            let { data } = await this.$post({
              api: "/show/store/areainfo",
              data:{
                storeId:id
              }
            });
            if (data.code === 0) {
              
              this.deptData = data.data;
              this.inType = data.data[0].areaType;
              this.unusedNum = data.data[0].unusedNum;
            console.log(data)
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
       },
       //导出
       async goodsexcel() {
          try {
            let { data } = await this.$post({
              api: "/import/outgoods",
              data:{
                // current:this.page.current,
                // pageSize:this.page.pageSize,
                startTime:this.queryData.startTime,
                endTime:this.queryData.endTime,
                goodsId:this.queryData.goodsId,
                status:0,
                goodsKindSecond:this.queryData.goodsKindSecond
              }
            });
            if (data.code === 0) {
              let urlstr = url+data.data.replace('static/','');
              window.location.href=urlstr;
            this.$message({
              type: "success",
              message: data.msg
            });
            console.log(urlstr)
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
       },
       //货位两级联动
      //  async addarea() {
      //     try {
      //       let { data } = await this.$post({
      //         api: "/show/store/area"
              
      //       });
      //       if (data.code === 0) {
      //       //  console.log(data)
      //         data.data.forEach(function(element,index){
      //           let storeAreaList = element.storeAreaList;
      //           let pindex = index; 
      //           this.deptData.push({
      //             value:element.id,
      //             label:element.storeName,
      //             children:[]
      //           })
      //           storeAreaList.forEach(function(element,index){
      //            this.deptData[pindex].children.push({
      //                  value: element.id,
      //                  label: element.areaName,
      //             })
      //             // this.alldata[pindex] = {
      //             //   inType:element.areaType,
      //             //   unusedNum :element.unusedNum 
      //             // }
                  
      //             // console.log(this.alldata)
      //           },this)
  
      //         },this);
             
               
      //       } else {
             
      //       }
      //     } catch (e) {
           
      //     }
      //  },
        //查询
        query() {
          this.tableList()
        },
        //导出
        exportData(){
          this.$confirm("确认将导出记录，您确定要导出吗?", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.goodsexcel();
            
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消导出"
            });
          });
          
          // exportExcel()
        },
        //查看
        entery(row){
          this.$router.push('factoryExitListDetail/'+row.order_no)
        },
        //确定录入
        okentry(){
          this.$router.push('/outgoingOrders')
        },
        //确认出库
        confirmation(){
          this.$confirm("你还有待完成扫描的订单，确认先出库已扫码的订单吗", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.dialogFormVisible = true;
            // this.addstoregoods()
            
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
         
        },
        sureData(){
          this.addstoregoods()
          
        },
        //取消出库
        canceloffAll() {
          this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.storegoods();
            
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        },
        //取消出库
        canceloffOne(row) {
          
          this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.orderNo = row.order_no;
            this.storegoods();
            // this.$message({
            //   type: "success",
            //   message: "删除成功!"
            // });
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        },
        handleCurrentChange(val) {
          this.page.current = val;
          this.tableList();
          // console.log(val);
        },
        showCateDialog() {
          this.goodsCates.show = true;
        },
        //时间选择器
        changeTime(arr){
          // console.log(arr)
          if(arr != null){
            this.queryData.startTime = arr[0];
            this.queryData.endTime = arr[1];
          }else{
            this.queryData.startTime = '';
            this.queryData.endTime = '';
          }
          
        },
        //联动选择
        handleChange(id) {
         this.areainfo(id)
       },
       //多选id
       handleSelectionChange(val){
         console.log(val)
        let array = [];
          val.forEach(element => {
            array.push(
               element.order_no
            )
          });
          
        this.orderNo = array.join(',');
        //  console.log(val)
       },
      returnOver(){
          this.$router.go(-1);
        }
      }
    };
  </script>
  
  <style lang="scss" scoped>
    .query {
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      &-item {
        float: left;
        margin: 15px 20px;
      }
      .el-input {
        width: 150px;
      }
      .el-button {
        margin: 0 15px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  
    .entry-info {
      padding: 15px 20px;
      border-bottom: 1px solid #eeeeee;
    }
  
    .goods-category {
      line-height: 32px;
      span {
        color: #0033ff;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  
    .goods-count {
      line-height: 32px;
    }
  
    .goods-id {
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      span {
        position: relative;
        display: inline-block;
        padding: 8px 15px;
        border: 1px solid #333;
        &:after {
          content: "";
          position: absolute;
          top: -6px;
          left: -6px;
          width: 100%;
          height: 100%;
          padding: 6px;
          border: 1px solid #333;
        }
      }
    }
  
    .wrapper {
      padding: 10px 15px;
    }
  
    .canceloff-btn {
      color: #0033ff;
      cursor: pointer;
    }
  </style>
  